<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外网首页</title>
    <link rel="stylesheet" href="reset.css" OLDSRC="reset.css" OLDID="840" RELATED="1">
    <link rel="stylesheet" href="swiper.min.css" OLDSRC="swiper.min.css" OLDID="841" RELATED="1">
    <link rel="stylesheet" href="home.css" OLDSRC="home.css" OLDID="842" RELATED="1">
    <script src="jquery-1.11.3.min.js" OLDSRC="jquery-1.11.3.min.js" OLDID="843" RELATED="1"></script>
    <script src="swiper-3.4.2.min.js" OLDSRC="swiper-3.4.2.min.js" OLDID="844" RELATED="1"></script>
</head>
<body>
    <div class="page-home-net">
        <!--头部-->
        <div class="header-wrap">
            <div class="banxin header">
                <div class="fl header-logo">
                    <img src="logo.png" alt="" class="logo" OLDSRC="logo.png" OLDID="811" RELATED="1" />
                    <span class="header-name">天津市港口统一收费服务管理平台</span>
                </div>
                <div class="fr">
                    <a href="###">登录</a>
                    <span class="line"> |</span>
                    <a href="###" class="active">注册</a>
                </div>
            </div>
        </div>
        <!--导航-->
        <div class="nav-wrap">
            <div class="banxin nav clearfix">
                <ul class="nav-list clearfix fl">
                    <li><a href="${ROOT_PATH}" class="active">首页</a></li>
                    <li><TRS_CHANNEL ID="工作动态" AUTOLINK="TRUE"/></li>
                    <li><TRS_CHANNEL ID="港口资讯" AUTOLINK="TRUE"/></li>
                    <li><TRS_CHANNEL ID="收费目录" AUTOLINK="TRUE"/></li>
                    <li><TRS_CHANNEL ID="业务办理" AUTOLINK="TRUE"/></li>
                    <li><TRS_CHANNEL ID="数据报告" AUTOLINK="TRUE"/></li>
                    <li><TRS_CHANNEL ID="服务指南" AUTOLINK="TRUE"/></li>
                </ul>
                <div class="search fr">
                    <input type="text" placeholder="输入搜索的内容" />
                    <div class="icon-search">
                        <img src="search.png" alt="" OLDSRC="search.png" OLDID="812" RELATED="1" />
                    </div>
                </div>
            </div>
        </div>
        <!--轮播图-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="banner.png" alt="" OLDSRC="banner.png" OLDID="813" RELATED="1" />
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-pagination"></div>
        </div>
        <!--业务-->
        <div class="business-wrap">
            <div class="banxin business">
                <div class="title">业务办理</div>
                <div class="subTitle">着力推进“互联网+政务服务”简化办理流程，随着业务“一次缴费全港通行”的推进，让缴费人真切感受到改革带来的便利。</div>
                <div class="business-list">
                    <div class="business-item-box business-item-box1">
                        <div class="item-icon">
                            <img src="business1.png" alt="" OLDSRC="business1.png" OLDID="814" RELATED="1" />
                        </div>
                        <div class="business-item business-item1">
                            <div class="item-title">业务缴费</div>
                            <div class="item-subTitle">快速便捷缴费服务</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                    <div class="business-item-box business-item-box2">
                        <div class="item-icon ">
                            <img src="business2.png" alt="" OLDSRC="business2.png" OLDID="815" RELATED="1" />
                        </div>
                        <div class="business-item business-item2">

                            <div class="item-title">业务收费</div>
                            <div class="item-subTitle">快速查看收费服务</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                    <div class="business-item-box business-item-box3">
                        <div class="item-icon">
                            <img src="business3.png" alt="" OLDSRC="business3.png" OLDID="816" RELATED="1" />
                        </div>
                        <div class="business-item business-item3">

                            <div class="item-title">作业放行</div>
                            <div class="item-subTitle">一键查看通关放行</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                    <div class="business-item-box business-item-box4">
                        <div class="item-icon">
                            <img src="business4.png" alt="" OLDSRC="business4.png" OLDID="817" RELATED="1" />
                        </div>
                        <div class="business-item business-item4">

                            <div class="item-title">收费项目</div>
                            <div class="item-subTitle">缴费清单一目了然</div>
                            <div class="item-operation">快速办理</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--数据服务-->
        <div class="server-wrap">
            <div class="banxin server">
                <div class="server-title">数据服务</div>
                <div class="server-subTitle">以“整合资源、共享数据、提供服务”为理念，提供最新最全面的数据报告。</div>
                <div class="server-content clearfix">
                    <!--echarts图文-->
                    <div class="content-echarts fl">
                        <img src="server1.png" alt="" OLDSRC="server1.png" OLDID="818" RELATED="1" />
                    </div>
                    <!--数据报告-->
                    <div class="data-report fl">
                        <div class="nav">
                            <span class="active">数据报告</span>
                        </div>
                        <ul class="data-report-list">
                            <li>
                                <span class="content fl">通知通知通知通知通知通知通知通知通知通知</span>
                                <span class="line fl">|</span>
                                <span class="time fr">2018-09-08</span>
                            </li>
                            <li>
                                <span class="content fl">通知通知通知通知通知通知通知通知通知通知</span>
                                <span class="line fl">|</span>
                                <span class="time fr">2018-09-08</span>
                            </li>
                            <li>
                                <span class="content fl">通知通知通知通知通知通知通知通知通知通知</span>
                                <span class="line fl">|</span>
                                <span class="time fr">2018-09-08</span>
                            </li>
                        </ul>
                    </div>
                    <!--收费项目查询-->
                    <div class="data-search fr">
                        <div class="nav">
                            <span class="active">收费项目查询</span>
                        </div>
                        <div class="search-form">
                            <div class="search-form-label">收费项目名称</div>
                            <div class="search-form-input">
                                <input type="text" placeholder="请输入收费项目名称" />
                            </div>
                            <div class="search-form-label">发布时间</div>
                            <div class="search-form-input">
                                <input type="text" placeholder="请输入发布时间" />
                            </div>
                            <div class="search-form-operation">
                                <div class="search-form-button  buttton-primary">查询</div>
                                <div class="search-form-button">重置</div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <!--工作动态-->
        <div class="dynamic-wrap">
            <div class="banxin dynamic">
                <div class="dynamic-title">工作动态</div>
                <div class="dynamic-advertisement">
                    <div id="scroll-list">
                        <ul class="clearfix">
                            <li>
                                <img src="notice.png" alt="" OLDSRC="notice.png" OLDID="819" RELATED="1" />
                                <span class="content">今日发布最新费项政策法规1</span>
                            </li>
                            <li>
                                <img src="notice.png" alt="" OLDSRC="notice.png" OLDID="819" RELATED="1" />
                                <span class="content">今日发布最新费项政策法规2</span>
                            </li>
                            <li>
                                <img src="notice.png" alt="" OLDSRC="notice.png" OLDID="819" RELATED="1" />
                                <span class="content">今日发布最新费项政策法规3</span>
                            </li>
                            <li>
                                <img src="notice.png" alt="" OLDSRC="notice.png" OLDID="819" RELATED="1" />
                                <span class="content">今日发布最新费项政策法规4</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="dynamic-content clearfix">
                    <!--新政策-->
                    <div class="dynamic-policy clearfix">
                        <div class="dynamic-policy-nav">
                            <div class="nav-item active">新政策</div>
                        </div>
                        <div class="dynamic-policy-content">
                            <div class="dynamic-policy-images">
                                <img src="dynamic-banner1.png" alt="" OLDSRC="dynamic-banner1.png" OLDID="820" RELATED="1" />
                                <img src="dynamic-banner2.png" alt="" OLDSRC="dynamic-banner2.png" OLDID="821" RELATED="1" />
                                <img src="dynamic-banner3.png" alt="" OLDSRC="dynamic-banner3.png" OLDID="822" RELATED="1" />
                            </div>
                            <ul class="dynamic-policy-list">

                               <TRS_DOCUMENTS BEGINMORE="" NUM="4" ID="政策法规"> 
                               <li>
                                   <img src="dynamic-icon1.png" alt="" class="icon-list fl" OLDSRC="dynamic-icon1.png" OLDID="823" RELATED="1" />
                                   <div class="fl content">
                                       <TRS_DOCUMENT FIELD="doctitle" EXTRA="target=_blank class=f12_h">
                                       </TRS_DOCUMENT>
                                   </div>
                                   <div class="fl line">|</div>
                                   <div class="fr time"><TRS_DOCUMENT DATEFORMAT="yyyy-MM-dd" FIELD="docreltime"></TRS_DOCUMENT></div>
                               </li>
                               </TRS_DOCUMENTS>
                           </ul>
                        </div>
                    </div>
                  
                    <!--价格动态-->
                    <div class="dynamic-policy clearfix dynamic-price fr">
                        <div class="dynamic-policy-nav">
                            <div class="nav-item active">价格动态</div>
                        </div>
                        <div class="dynamic-policy-content">
                            <div class="dynamic-policy-images">
                                <img src="dynamic-banner1.png" alt="" OLDSRC="dynamic-banner1.png" OLDID="820" RELATED="1" />
                                <img src="dynamic-banner2.png" alt="" OLDSRC="dynamic-banner2.png" OLDID="821" RELATED="1" />
                                <img src="dynamic-banner3.png" alt="" OLDSRC="dynamic-banner3.png" OLDID="822" RELATED="1" />
                            </div>
                            <ul class="dynamic-policy-list">

                                <TRS_DOCUMENTS BEGINMORE="" NUM="4" ID="价格动态"> 
                                <li>
                                    <img src="dynamic-icon2.png" alt="" class="icon-list fl" OLDSRC="dynamic-icon2.png" OLDID="824" RELATED="1" />
                                    <div class="fl content">
                                        <TRS_DOCUMENT FIELD="doctitle" EXTRA="target=_blank class=f12_h">
                                        </TRS_DOCUMENT>
                                    </div>
                                    <div class="fl line">|</div>
                                    <div class="fr time"><TRS_DOCUMENT DATEFORMAT="yyyy-MM-dd" FIELD="docreltime"></TRS_DOCUMENT></div>
                                </li>
                                </TRS_DOCUMENTS>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--服务指南-->
        <div class="guide-wrap">
            <div class="guide banxin">
                <div class="guide-title">服务指南</div>
                <div class="guide-subTitle">加强行业法制建设,建立公正、公平、公开的市场秩序,为会员单位提供便利服务指南,快速便捷掌握平台内容。</div>
                <div class="guide-content">
                    <div class="guide-image-text fl">
                        <div class="guide-item guide-item1">
                        <div class="guide-item-title">
                            <img src="guide-title1.png" alt="" class="item-mark" OLDSRC="guide-title1.png" OLDID="825" RELATED="1" />
                            <div class="guide-item-title-text">银行办理</div>
                        </div>
                        <div class="list">
                            <div class="list-item">
                                <img src="guide-icon1.png" alt="" class="list-icon" OLDSRC="guide-icon1.png" OLDID="826" RELATED="1" />
                                <span>开户网点查询</span>
                            </div>
                            <div class="list-item">
                                <img src="guide-icon1.png" alt="" class="list-icon" OLDSRC="guide-icon1.png" OLDID="826" RELATED="1" />
                                <span>支持银行列表</span>
                            </div>
                            <div class="list-item">
                                <img src="guide-icon1.png" alt="" class="list-icon" OLDSRC="guide-icon1.png" OLDID="826" RELATED="1" />
                                <span>监管账户办理</span>
                            </div>
                        </div>
                        <div class="guide-more">
                            <div class="fr">
                                <span>更多</span>
                                <img src="more1.png" alt="" class="more-icon" OLDSRC="more1.png" OLDID="827" RELATED="1" />
                            </div>
                        </div>
                    </div>

                        <div class="guide-item guide-item2">
                            <div class="guide-item-title">
                                <img src="guide-title2.png" alt="" class="item-mark" OLDSRC="guide-title2.png" OLDID="828" RELATED="1" />
                                <div class="guide-item-title-text">缴费
                                    流程</div>
                            </div>
                            <div class="list">
                                <div class="list-item">
                                    <img src="guide-icon2.png" alt="" class="list-icon" OLDSRC="guide-icon2.png" OLDID="829" RELATED="1" />
                                    <span>及时准确通知</span>
                                </div>
                                <div class="list-item">
                                    <img src="guide-icon2.png" alt="" class="list-icon" OLDSRC="guide-icon2.png" OLDID="829" RELATED="1" />
                                    <span>平台缴费流程</span>
                                </div>
                                <div class="list-item">
                                    <img src="guide-icon2.png" alt="" class="list-icon" OLDSRC="guide-icon2.png" OLDID="829" RELATED="1" />
                                    <span>缴费全程跟踪</span>
                                </div>
                            </div>
                            <div class="guide-more">
                                <div class="fr">
                                    <span>更多</span>
                                    <img src="more2.png" alt="" class="more-icon" OLDSRC="more2.png" OLDID="830" RELATED="1" />
                                </div>
                            </div>
                        </div>

                        <div class="guide-item guide-item3">
                            <div class="guide-item-title">
                                <img src="guide-title3.png" alt="" class="item-mark" OLDSRC="guide-title3.png" OLDID="831" RELATED="1" />
                                <div class="guide-item-title-text">收费
                                    流程</div>
                            </div>
                            <div class="list">
                                <div class="list-item">
                                    <img src="guide-icon3.png" alt="" class="list-icon" OLDSRC="guide-icon3.png" OLDID="832" RELATED="1" />
                                    <span>平台收费流程</span>
                                </div>
                                <div class="list-item">
                                    <img src="guide-icon3.png" alt="" class="list-icon" OLDSRC="guide-icon3.png" OLDID="832" RELATED="1" />
                                    <span>快速便捷收费</span>
                                </div>
                                <div class="list-item">
                                    <img src="guide-icon3.png" alt="" class="list-icon" OLDSRC="guide-icon3.png" OLDID="832" RELATED="1" />
                                    <span>及时准确通知</span>
                                </div>
                            </div>
                            <div class="guide-more">
                                <div class="fr">
                                    <span>更多</span>
                                    <img src="more3.png" alt="" class="more-icon" OLDSRC="more3.png" OLDID="833" RELATED="1" />
                                </div>
                            </div>
                        </div>

                        <div class="guide-item guide-item4">
                            <div class="guide-item-title">
                                <img src="guide-title4.png" alt="" class="item-mark" OLDSRC="guide-title4.png" OLDID="834" RELATED="1" />
                                <div class="guide-item-title-text">通关流程</div>
                            </div>
                            <div class="list">
                                <div class="list-item">
                                    <img src="guide-icon4.png" alt="" class="list-icon" OLDSRC="guide-icon4.png" OLDID="835" RELATED="1" />
                                    <span>平台通关流程</span>
                                </div>
                                <div class="list-item">
                                    <img src="guide-icon4.png" alt="" class="list-icon" OLDSRC="guide-icon4.png" OLDID="835" RELATED="1" />
                                    <span>通关时效性</span>
                                </div>
                                <div class="list-item">
                                    <img src="guide-icon4.png" alt="" class="list-icon" OLDSRC="guide-icon4.png" OLDID="835" RELATED="1" />
                                    <span>及时准确通知</span>
                                </div>
                            </div>
                            <div class="guide-more">
                                <div class="fr">
                                    <span>更多</span>
                                    <img src="more4.png" alt="" class="more-icon" OLDSRC="more4.png" OLDID="836" RELATED="1" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="guide-question fr">
                        <div class="guide-question-nav">
                            <div class="nav-item active">
                                热门问题
                            </div>

                        </div>
                        <!--列表-->
                        <ul class="guide-question-list">
                            <li>
                                <img src="guide-icon2.png" alt="" class="guide-item-icon" OLDSRC="guide-icon2.png" OLDID="829" RELATED="1" />
                                <span class="content">一图了解放行过程及其他及其他</span>
                            </li>
                            <li>
                                <img src="guide-icon2.png" alt="" class="guide-item-icon" OLDSRC="guide-icon2.png" OLDID="829" RELATED="1" />
                                <span class="content">一图了解放行过程及其他及其他</span>
                            </li>
                            <li>
                                <img src="guide-icon2.png" alt="" class="guide-item-icon" OLDSRC="guide-icon2.png" OLDID="829" RELATED="1" />
                                <span class="content">一图了解放行过程及其他及其他</span>
                            </li>
                            <li>
                                <img src="guide-icon2.png" alt="" class="guide-item-icon" OLDSRC="guide-icon2.png" OLDID="829" RELATED="1" />
                                <span class="content">一图了解放行过程及其他及其他</span>
                            </li>
                        </ul>
                        <!--知识宝库，了解我们-->
                        <div class="guide-link">
                            <div class="fl guide-knowledge guide-link-item">
                                <img src="guide-question1.png" alt="" OLDSRC="guide-question1.png" OLDID="837" RELATED="1" />
                                <span class="link-item-text">知识宝库</span>
                            </div>
                            <div class="fr guide-know-us guide-link-item">
                                <img src="guide-question2.png" alt="" OLDSRC="guide-question2.png" OLDID="838" RELATED="1" />
                                <span class="link-item-text">了解我们</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--关于-->
        <div class="about-wrap">
            <div class="about banxin clearfix">
                <div class="about-us fl">
                    <div class="about-title">关于我们</div>
                    <div class="about-line"></div>
                    <ul>
                        <li>关于我们</li>
                        <li>服务条款</li>
                        <li>法律声明</li>
                        <li>友情链接</li>
                    </ul>
                </div>
                <div class="concat-us fl">
                    <div class="about-title">联系我们</div>
                    <div class="about-line"></div>
                    <ul>
                        <li>服务热线：011-1232211</li>
                        <li>地     址：天津市</li>
                        <li>技术支持：天津市</li>
                    </ul>
                </div>
                <div class="about-down fr">
                    <div class="about-title">移动端下载</div>
                    <div class="about-line"></div>
                    <div class="app-img">
                        <img src="app.png" alt="" OLDSRC="app.png" OLDID="839" RELATED="1" />
                        <div class="text">扫描二维码下载</div>
                    </div>
                </div>
            </div>
        </div>
        <!--版权-->
        <div class="copyright">津ICO备0112313131231 经营许可证：津102231023123</div>
    </div>


    <script language="javascript">
      var mySwiper = new Swiper('.swiper-container',{
        pagination : '.swiper-pagination',
        paginationClickable :true,
        dynamicBullets: true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
      })

        // 滚动广告
      var marginLeft = 0;//注意命名
      var scroll = true;
      //定时函数，每200毫秒执行一次函数
      setInterval(function(){
        if(scroll){
          $("#scroll-list li:first").animate(  //第一个li开始执行动画
            {marginLeft:marginLeft--}, //设置上面的外边距自减
            0,
            function(){  //动画之后执行的函数

              if( -marginLeft==$(this).width()+1){ //判断li移动的距离是否超过自身的高度
                var $f = $(this); //复制一个li
                $(this).remove(); //把第一个移除。第一个移除之后，第二个就自动变为第一个
                marginLeft=0;
                $f.css("margin-left","0px");
                $("#scroll-list ul").append($f); //把第一个追加加到列表的最后，变成一个无缝连接
              }
            }
          );
        }
      },200);
      $(function(){
        $("#scroll-list ul").hover(function(){scroll = false;},function(){scroll = true;});

      });
    </script>
</body>
</html>